<template>
  <div class="tab">
    <el-table
      :row-class-name="tableRowClassName"
      :data="tableData"
      @row-click="change"
      :default-sort="{ prop: 'date', order: 'descending' }"
    >
      <el-table-column prop="name" label="角色名字" sortable width="100">
      </el-table-column>
      <el-table-column prop="A" label="10-14周岁" sortable width="110">
      </el-table-column>
      <el-table-column prop="B" label="14-18周岁" sortable width="110">
      </el-table-column>
      <el-table-column prop="C" label="18-25周岁" sortable width="110">
      </el-table-column>
      <el-table-column prop="D" label="25-35周岁" sortable width="110">
      </el-table-column>
      <el-table-column prop="E" label="35+周岁" sortable width="110">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
    };
  },
  mounted() {
    this.getdata();
  },
  methods: {
    getdata() {
      this.$axios.get("./json/shuju.json").then((tableData) => {
        this.tableData = tableData.data.mapdata;
        // console.log(tableData.data.mapdata);
        // console.log(1)
      });
    },
    formatter(row, column) {
      return row.specialty;
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
    change(val) {
      let thisRowData = this;
      thisRowData = val;
      // console.log(thisRowData);
      // this.$emit("table", thisRowData);
      this.$store.commit("changedata",thisRowData);
    },
  },
  computed: {
  },
};
</script>

<style lang="scss">
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>